<template>
	<view class="modal-overlay" v-if="show" @click="closeModal">
		<view class="modal-content" @click.stop>
			<view class="modal-title">预约时间</view>
			<view class="selected-datetime">{{ selectedDate }} {{ selectedTime }}</view>
			
			<view class="time-options">
				<view 
					v-for="(option, index) in timeOptions" 
					:key="index" 
					:class="['time-option', { selected: selectedTimeIndex === index, disabled: option.disabled }]"
					@click="selectTime(index)"
				>
					<text class="date">{{ option.date }} <text v-if="option.dayLabel">({{ option.dayLabel }})</text></text>
					<text class="time">{{ option.time }}</text>
				</view>
			</view>
			
			<view class="modal-actions">
				<button class="action-button cancel-button" @click="closeModal">取消</button>
				<view class="divider"></view>
				<button class="action-button confirm-button" @click="confirmTime">确定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits(['close', 'confirm']);

	const timeOptions = ref([
		{ date: '3月13日', dayLabel: '今天', time: '14:00', disabled: false },
		{ date: '3月14日', dayLabel: '明天', time: '09:00', disabled: false },
		{ date: '3月15日', dayLabel: '后天', time: '09:00', disabled: false },
		{ date: '3月16日', dayLabel: '', time: '09:00', disabled: true },
	]);

	const selectedTimeIndex = ref(1); // Default selected index

	const selectedDate = ref(timeOptions.value[selectedTimeIndex.value].date);
	const selectedTime = ref(timeOptions.value[selectedTimeIndex.value].time);

	// Watch for changes in the 'show' prop to reset selected time when opening
	watch(() => props.show, (newValue) => {
		if (newValue) {
			// Reset to default or initial selection when the modal opens
			selectedTimeIndex.value = 1;
			selectedDate.value = timeOptions.value[selectedTimeIndex.value].date;
			selectedTime.value = timeOptions.value[selectedTimeIndex.value].time;
		}
	});

	const closeModal = () => {
		emit('close');
	};

	const selectTime = (index) => {
		if (!timeOptions.value[index].disabled) {
			selectedTimeIndex.value = index;
			selectedDate.value = timeOptions.value[index].date;
			selectedTime.value = timeOptions.value[index].time;
		}
	};

	const confirmTime = () => {
		emit('confirm', timeOptions.value[selectedTimeIndex.value]);
	};

</script>

<style scoped>
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 16rpx;
		width: 80%;
		max-width: 600rpx;
		overflow: hidden;
		margin-bottom: 100rpx; /* Add margin to avoid being covered by bottom bar */
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.selected-datetime {
		font-size: 24rpx;
		color: #888;
		text-align: center;
		padding: 10rpx 0 20rpx 0;
	}

	.time-options {
		padding: 0 32rpx;
		max-height: 400rpx; /* Adjust as needed */
		overflow-y: auto;
	}

	.time-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 28rpx;
		color: #333;
	}

	.time-option:last-child {
		border-bottom: none;
	}

	.time-option.selected .date,
	.time-option.selected .time {
		color: #3083fb;
		font-weight: bold;
	}

	.time-option.disabled {
		color: #ccc;
		opacity: 0.6;
		/* pointer-events: none; */ /* Prevent clicking on disabled options */
	}

	.time-option.disabled .date,
	.time-option.disabled .time {
		color: #ccc;
	}

	.modal-actions {
		display: flex;
		border-top: 1rpx solid #eee;
	}

	.action-button {
		flex: 1;
		border: none;
		background-color: transparent;
		font-size: 30rpx;
		padding: 25rpx 0;
		text-align: center;
	}

	.cancel-button {
		color: #666;
	}

	.confirm-button {
		color: #3083fb;
		font-weight: bold;
	}

	.divider {
		width: 1rpx;
		background-color: #eee;
	}

</style> 